// 菜单管理
import React from 'react';
import { Space, Table, Typography } from 'antd';
const fixedColumns = [
    {
        title: '序号',
        dataIndex: 'id',
        width: 60,
    },
    {
        title: '名称',
        dataIndex: 'firstName',
        width: 100,
        // fixed: 'left',
    },
    {
        title: '路径',
        dataIndex: 'lastName',
    },
    {
        title: '排序',
        render: (_, record) => `Group ${Math.floor(record.id / 4)}`,
        onCell: (record) => ({
            rowSpan: record.id % 4 === 0 ? 4 : 0,
        }),
    },
    {
        title: '图标',
        dataIndex: 'age',
        onCell: (record) => ({
            colSpan: record.id % 4 === 0 ? 2 : 1,
        }),
    },
    {
        title: '操作',
        width: 150,
        render: () => (
            <Space>
                <Typography.Link>Action1</Typography.Link>
                <Typography.Link>Action2</Typography.Link>
            </Space>
        ),
    },
];
const getData = (count) => {
    const data = new Array(count).fill(null).map((_, index) => ({
        id: index + 1,
        firstName: `First_${index.toString(16)}`,
        lastName: `Last_${index.toString(16)}`,
        age: 25 + (index % 10),
        address1: `New York No. ${index} Lake Park`,
        address2: `London No. ${index} Lake Park`,
        address3: `Sydney No. ${index} Lake Park`,
    }));
    return data;
};
const MenuList = () => {
    const data = getData(20)
    const mergedColumns = React.useMemo(() => {
        return fixedColumns.map((col) => ({
            ...col,
            onCell: undefined,
        }));
    }, []);
    return (
        <div style={{ padding: 15 }}>
            <Table
                bordered
                virtual
                columns={mergedColumns}
                scroll={{
                    x: 2000,
                    y: 400,
                }}
                rowKey="id"
                dataSource={data}
                pagination={false}
            // ref={tblRef}
            // rowSelection={
            //     expanded
            //         ? undefined
            //         : {
            //             type: 'radio',
            //             columnWidth: 48,
            //         }
            // }
            // expandable={expandableProps}
            />
        </div>
    );
};
export default MenuList;